<template>
  <div class="search">
    <topheader title="搜索">
    </topheader>
    <div class="search_box">
      <form @submit.prevent="search">
            <mt-search
              class="mysearch"
              v-model="keyword"
              cancel-text="取消"
              placeholder="搜索"
              :class="searchBarFixed === true?'is-fixed':''">  
            </mt-search>
      </form>
      <section class="container" v-if="!noSearchShops">
        <div class="mode_list" v-for="(item,index) in searchShops" :key="index"
        >
          <div class="mode_img">
            <img :src="baseImgUrl+item.image_path"></img>
          </div>
          <div class="mode_info">
              <h3 class="ellipsis">{{item.name}}</h3>
              <span class="mode_desc">{{item.description}}</span>
              <span class="mode_cate">{{item.category}}</span>
              <div class="mode_text">
                <a class="price">{{item.float_delivery_fee}}元起送</a>
                <span class="mode_distance">距离{{item.distance}}</span>
              </div>
          </div>
        </div>
      </section> 
      <div class="search_none" v-else>很抱歉！无搜索结果</div>                           
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import TopHeader from "../components/TopHeader";
import { Search } from 'mint-ui';
export default {
  name: 'Search',
  
  data() {
    return {
      keyword:'',
      baseImgUrl:'https://elm.cangdu.org/img/',
      noSearchShops:false,
      searchBarFixed:false
    }
  },
  computed: {
    ...mapState(['searchShops'])
  },
  mounted() {
    window.addEventListener('scroll',this.handleScroll)
  },
  methods: {
    search(){
      const keyword = this.keyword.trim()
      if(keyword){
        this.$store.dispatch('searchShop', keyword)
      }
    },
    handleScroll(){
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      const offsetTop = document.querySelector('.mysearch').offsetTop

      if(scrollTop > offsetTop){
        this.searchBarFixed = true
      }else{
        this.searchBarFixed = false
      }
    }
  },
  watch: {
    searchShops(value){
      if(!value.length){
        this.noSearchShops = true
      }else{
        this.noSearchShops = false
      }
    }
  },
  components:{
    MtSearch:Search,
    topheader:TopHeader
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import "../assets/stylus/mixin.styl" 
.search 
  width 100% 
  overflow hidden
  margin-bottom 2.8rem
  .search_box
    z-index 999
    .mysearch 
      height: 2.8rem
      width 100%
      z-index 1
      &.is-fixed
        position fixed
        top 0
      .mint-searchbar
        background-color #efefef
        .mint-searchbar-inner 
          border-radius 2rem
        .mint-searchbar-cancel
          color #41B883
    .mode_list
      bottom-border-1px(#e4e4e4)
      display flex
      padding 0.8rem
      .mode_img
        display flex
        justify-content center
        align-items center
        margin-right 0.5rem
        img
          width 5.3rem
      .mode_info
        flex 1
        display flex
        flex-direction column
        h3
          width 6rem 
          font-size 1rem
          font-weight 600
          margin-bottom 0.4rem
        .mode_desc
          flex 1
          color #ccc
          font-size 0.6rem
        .mode_cate
          color #ccc
          font-size 0.6rem
        .mode_text
          margin-top 0.4rem
          display flex
          justify-content space-between
          font-size 0.6rem
            .price
              color #f5A100
              font-size 0.8rem
              font-weight 600
              span
                font-size 0.6rem
                font-weight 400
.search_none 
  margin: 0 auto 
  color: #333 
  background-color: #fff 
  text-align: center 
  margin-top: 0.4rem
</style>
